<template>
<vs-modal :show.sync="show" effect="fade" width="800px">
  <div class="modal-header" slot="modal-header">
    <h4 class="modal-title">{{$t('common.detail')}}</h4>
  </div>  
  <div class="modal-body" slot="modal-body">
    <monitor-tree></monitor-tree>
  </div>
  <div class="modal-footer" slot="modal-footer">
    <button type="button" class="btn btn-default" @click.prevent="onDisconnectAll">{{$t('common.disconnectAll')}}</button>
    <button type="button" class="btn btn-default" @click.prevent="onQuit">{{$t('common.quit')}}</button>
  </div>    
</vs-modal>  
</template>

<script>
import ebus from 'libs/ebus.js'
import MonitorTree from 'share/server/components/MonitorTree.vue'

export default {
  components: {
    'monitor-tree': MonitorTree
  },
  data () {
    return {
      show: false
    }
  },
  methods: {
    onDisconnectAll () {
      ebus.emit('del-all-monitor-src')
    },
    onQuit () {
      this.show = false
    },
    onShow (val) {
      ebus.emit('monitor-tree-update', val)
      this.show = true
    }
  },
  ready () {
    ebus.on('show-monitor-devs', this.onShow)
  }
}
</script>

<style>
</style>